<template>
  <view class="page">
    <u-navbar @leftClick="navLeftClick" :fixed="false" title="行为跟踪" placeholder bgColor="#fff"></u-navbar>
    <view class="info">
      <view class="u-flex u-row-between u-col-top">
        <view class="u-flex-1 u-font-28">
          <view class="u-m-b-12">客户：{{ form.customerName }}</view>
          <view class="u-m-b-12">推广人员：{{ form.promoterName }}</view>
          <view class="u-m-b-12">IP地址：{{ form.ipAddress }}</view>
          <view class="u-m-b-12">操作系统：{{ form.os }}</view>
          <view>设备名称：{{ form.deviceName }}</view>
        </view>
        <image style="width: 140rpx;height: 140rpx;margin-left: 20rpx;flex-shrink: 0;" :src="form.customerAvatar" mode="aspectFill" />
      </view>
    </view>
    <view class="list" v-for="(list, date) in grouped" :key="date">
      <view class="u-flex u-m-b-20">
        <image style="width: 32rpx;height: 28.16rpx;margin-right: 12rpx;" src="../../static/my/mySalesDetail.png" />
        <text>{{ date }}</text>
      </view>
      <view class="item" v-for="(item, index) in list" :key="index">
        <view class="time">{{ item.logTime }}</view>
        <view class="point" />
        <view class="u-flex-1">{{ item.actionDesc }}</view>
      </view>
    </view>
  </view>
</template>

<script>
import { getLogDetail } from '@/api/index'

export default {
  data() {
    return {
      userId: '',
      form: {},
      grouped: {},
    };
  },
  onLoad(options) {
    this.userId = options.customerId
    this.getForm()
  },
  methods: {
    getForm() {
      uni.showLoading({ mask: true })
      getLogDetail({userId: this.userId}).then(res => {
        uni.hideLoading()
        this.form = res.data[0]
        this.grouped = this.groupByDate(res.data)
      })
    },
    groupByDate(data) {
      const grouped = {};
      
      data.forEach(item => {
        const date = item.logDate;
        if (!grouped[date]) {
          grouped[date] = [];
        }
        grouped[date].push(item);
      });
      
      return grouped;
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  width: 750rpx;
  min-height: 100vh;
  background-color: #F5F5F5;
  padding-bottom: 80rpx;
  position: relative;
  .info {
    width: 702rpx;
    background: #FFFFFF;
    border-radius: 12rpx;
    border: 2rpx solid #56CB03;
    margin: 12rpx auto;
    padding: 26rpx 30rpx 34rpx;
  }
  .list {
    width: 702rpx;
    background: #FFFFFF;
    border-radius: 12rpx;
    margin: 0 auto;
    padding: 30rpx;
    .item {
      display: flex;
      align-items: flex-start;
      padding-bottom: 25rpx;
      font-size: 28rpx;
      color: #000000;
      position: relative;
      .time {
        width: 126rpx;
        font-size: 24rpx;
        color: #000000;
        line-height: 44rpx;
      }
      .point {
        width: 8rpx;
        height: 8rpx;
        background: #56CB03;
        border-radius: 50%;
        transform: translateY(18rpx);
        margin-right: 12rpx;
        position: relative;
        z-index: 2;
      }
    }
    .item::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 2rpx;
      height: 100%;
      transform: translate(130rpx, 18rpx);
      border-left: 2rpx dashed #818181 ;
      z-index: 1;
    }
    .item:last-child::after {
      display: none;
    }
  }
}
</style>
